<template>
  <!-- <h3><dv-decoration-7>各班男女人数</dv-decoration-7></h3> -->
  <dv-border-box-10 :color="['#50649a', '#50649b']">
    <div class="k1">
      <div class="bao">
        <div ref="myChart5" id="sexDiv1"></div>
        <div ref="myChart6" id="sexDiv2"></div>
        <div ref="myChart7" id="sexDiv3"></div>
      </div>
      <select v-model="ccty" class="fei" @change="chageNum(ccty)">
        <option
          v-for="item1 in cty"
          :value="item1.kol"
          :key="item1.id"
          selected
        >
          {{ item1.kol }}
        </option>
      </select>
    </div>
  </dv-border-box-10>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
import { zhuti } from "../assets/index.js";

// 在Vue组件中引入echarts
export default {
  data() {
    return {
      qiu: [
        [0.82, 0.9, 0.96],
        [0.82, 0.9, 0.96],
        [0.82, 0.9, 0.96],
      ],
      cty: [
        {
          id: 0,
          kol: "出勤率",
        },
        {
          id: 1,
          kol: "抬头率",
        },
        {
          id: 2,
          kol: "点头率",
        },
      ],
      ccty: "出勤率",
      kl: 0,
    };
  },
  methods: {
    chageNum(e) {
      if (e == "出勤率") {
        this.kl = 0;
      } else if (e == "抬头率") {
        this.kl = 1;
      } else if (e == "点头率") {
        this.kl = 2;
      }
    },
    jianTab() {
      let myChart5 = echarts.init(this.$refs.myChart5, zhuti);
      let myChart6 = echarts.init(this.$refs.myChart6, zhuti);
      let myChart7 = echarts.init(this.$refs.myChart7, zhuti);

      myChart5.setOption({
        series: [
          {
            type: "liquidFill",
            data: [
              this.qiu[this.kl][0],
              this.qiu[this.kl][0],
              this.qiu[this.kl][0],
            ],
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(4,33,77, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(4,33,77, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(4,33,77, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 3,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(50,115,233, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(50,115,233, .5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(50,115,233, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(72,107,254, 0.8)",
                  },
                  {
                    offset: 0.75,
                    color: "rgba(21,216,238, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(72,107,254, 1)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              formatter: function (params) {
                // console.log(params);
                return (
                  "一班 \n" +
                  Math.floor(params.data[0] ? params.value[0] : 0.82 * 100) +
                  "%"
                ); // 在formatter中设置文本内容为"一班 " + 数值
              },
              fontSize: 15,
            },
          },
        ],
      });

      myChart6.setOption({
        series: [
          {
            type: "liquidFill",
            data: [
              this.qiu[this.kl][1],
              this.qiu[this.kl][1],
              this.qiu[this.kl][1],
            ],
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(4,33,77, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(4,33,77, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(4,33,77, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 3,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(50,115,233, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(50,115,233, .5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(50,115,233, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(72,107,254, 0.8)",
                  },
                  {
                    offset: 0.75,
                    color: "rgba(21,216,238, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(72,107,254, 1)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              formatter: function (params) {
                return (
                  "二班 \n" +
                  Math.floor(params.data[0] ? params.value[0] : 0.9 * 100) +
                  "%"
                ); // 在formatter中设置文本内容为"一班 " + 数值
              },
              fontSize: 15,
            },
          },
        ],
      });

      myChart7.setOption({
        series: [
          {
            type: "liquidFill",
            data: [
              this.qiu[this.kl][2],
              this.qiu[this.kl][2],
              this.qiu[this.kl][2],
            ],
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(4,33,77, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(4,33,77, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(4,33,77, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 3,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(50,115,233, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(50,115,233, .5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(50,115,233, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(72,107,254, 0.8)",
                  },
                  {
                    offset: 0.75,
                    color: "rgba(21,216,238, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(72,107,254, 1)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              formatter: function (params) {
                return (
                  "三班 \n" +
                  Math.floor(params.data[2] ? params.data[2] : 0.86 * 100) +
                  "%"
                ); // 在formatter中设置文本内容为"一班 " + 数值
              },
              fontSize: 15,
            },
          },
        ],
      });

      // 同样的配置应用到myChart6和myChart7

      setInterval(() => {
        this.qiu = this.qiu.map(() => [
          [Math.random() * 0.2 + 0.8],
          [Math.random() * 0.6 + 0.4],
          [Math.random() * 0.6 + 0.4],
        ]);
        // console.log(this.qiu);
        myChart5.setOption({
          series: [
            {
              type: "liquidFill",
              data: [
                this.qiu[0][this.kl],
                this.qiu[0][this.kl],
                this.qiu[0][this.kl],
              ],
              backgroundStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0.5,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(4,33,77, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(4,33,77, .5)",
                    },
                    {
                      offset: 0,
                      color: "rgba(4,33,77, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              },
              outline: {
                borderDistance: 2,
                itemStyle: {
                  borderWidth: 3,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(50,115,233, 1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(50,115,233, .5)",
                      },
                      {
                        offset: 1,
                        color: "rgba(50,115,233, 1)",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#000",
                },
              },
              color: [
                {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(72,107,254, 0.8)",
                    },
                    {
                      offset: 0.75,
                      color: "rgba(21,216,238, .5)",
                    },
                    {
                      offset: 0,
                      color: "rgba(72,107,254, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              ],
              label: {
                formatter: function (params) {
                  // console.log(params);
                  return "一班 \n" + Math.floor(params.value * 100) + "%"; // 在formatter中设置文本内容为"一班 " + 数值
                },
                fontSize: 15,
              },
            },
          ],
        });

        myChart6.setOption({
          series: [
            {
              type: "liquidFill",
              data: [
                this.qiu[1][this.kl],
                this.qiu[1][this.kl],
                this.qiu[1][this.kl],
              ],
              backgroundStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0.5,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(4,33,77, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(4,33,77, .5)",
                    },
                    {
                      offset: 0,
                      color: "rgba(4,33,77, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              },
              outline: {
                borderDistance: 2,
                itemStyle: {
                  borderWidth: 3,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(50,115,233, 1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(50,115,233, .5)",
                      },
                      {
                        offset: 1,
                        color: "rgba(50,115,233, 1)",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#000",
                },
              },
              color: [
                {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(72,107,254, 0.8)",
                    },
                    {
                      offset: 0.75,
                      color: "rgba(21,216,238, .5)",
                    },
                    {
                      offset: 0,
                      color: "rgba(72,107,254, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              ],
              label: {
                formatter: function (params) {
                  return "二班 \n" + Math.floor(params.data * 100) + "%"; // 在formatter中设置文本内容为"一班 " + 数值
                },
                fontSize: 15,
              },
            },
          ],
        });

        myChart7.setOption({
          series: [
            {
              type: "liquidFill",
              data: [
                this.qiu[2][this.kl],
                this.qiu[2][this.kl],
                this.qiu[2][this.kl],
              ],
              backgroundStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0.5,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(4,33,77, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(4,33,77, .5)",
                    },
                    {
                      offset: 0,
                      color: "rgba(4,33,77, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              },
              outline: {
                borderDistance: 2,
                itemStyle: {
                  borderWidth: 3,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(50,115,233, 1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(50,115,233, .5)",
                      },
                      {
                        offset: 1,
                        color: "rgba(50,115,233, 1)",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#000",
                },
              },
              color: [
                {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(72,107,254, 0.8)",
                    },
                    {
                      offset: 0.75,
                      color: "rgba(21,216,238, .5)",
                    },
                    {
                      offset: 0,
                      color: "rgba(72,107,254, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              ],
              label: {
                formatter: function (params) {
                  return "三班 \n" + Math.floor(params.data * 100) + "%"; // 在formatter中设置文本内容为"一班 " + 数值
                },
                fontSize: 15,
              },
            },
          ],
        });
      }, 1000); // 每隔1.5秒更新一次数据
    },
  },

  mounted() {
    this.jianTab();
  },
};
</script>

<style scoped>
.k1 {
  position: relative;
  overflow: hidden;
  /* align-items: center; */
  width: 100%;
  height: 100%;
  margin-top: 15px;
}
.bao {
  width: 100%;
  height: 100%;
  display: flex;

  justify-content: space-between;
}
.fei {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #8fe6f4;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0.6);
  border-bottom: 1px solid rgba(121, 226, 249, 0.35);
  border-left: 1px solid rgba(121, 226, 249, 0.35);
}
.fei option {
  color: #8fe6f4;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121, 226, 249, 0.6);
  border-bottom: 1px solid rgba(121, 226, 249, 0.35);
  border-left: 1px solid rgba(121, 226, 249, 0.35);
}
#sexDiv1,
#sexDiv2,
#sexDiv3 {
  flex: 1;
  margin: 0 auto;
  margin-top: 1.5rem;
  width: 30%;
  height: 80%;
  transform: scale(1.3);

  /* background-color: aqua; */
  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
</style>
